<script setup lang="ts">
import type { FormRules } from "element-plus";
import { isAllEmpty } from "@pureadmin/utils";
import { zxcvbn } from "@zxcvbn-ts/core";
import { matchPasswd } from "@/utils/reg";

const { t } = useI18n();
const formRef = ref();
const editPwd = reactive({
  oldPwd: "",
  newPwd: "",
  newPwd2: ""
});

const formRules = reactive<FormRules>({
  oldPwd: [{ required: true, message: "请输入旧密码", trigger: "blur" }],
  newPwd: [
    {
      required: true,
      message: "请输入新密码",
      trigger: "blur"
    },
    {
      min: 8,
      max: 18,
      message: t("login.purePassWordRuleReg"),
      trigger: "blur"
    },
    {
      validator: (rule, value, callback) => {
        matchPasswd(value, 2)
          ? callback()
          : callback(new Error(t("login.purePassWordRuleReg")));
      },
      trigger: "blur"
    }
  ],
  newPwd2: [
    {
      required: true,
      message: "请再次输入新密码",
      trigger: "blur"
    },
    {
      validator: (rule: any, value: string, callback: any) => {
        if (value !== editPwd.newPwd) {
          return new Error("两次密码不一致");
        }
        return true;
      },
      trigger: "blur"
    }
  ]
});

const pwdProgress = [
  { color: "#e74242", text: "非常弱" },
  { color: "#EFBD47", text: "弱" },
  { color: "#ffa500", text: "一般" },
  { color: "#1bbf1b", text: "强" },
  { color: "#008000", text: "非常强" }
];
const curScore = ref();
watch(
  () => editPwd.newPwd,
  val => {
    curScore.value = isAllEmpty(val) ? -1 : zxcvbn(val).score;
  }
);
function getRef() {
  return formRef.value;
}
defineExpose({ getRef });
</script>

<template>
  <el-form ref="formRef" :model="editPwd" :rules="formRules">
    <el-form-item label="旧密码" prop="oldPwd">
      <el-input
        v-model="editPwd.oldPwd"
        clearable
        show-password
        type="password"
        placeholder="请输入旧密码"
      />
    </el-form-item>
    <el-form-item label="新密码" prop="newPwd">
      <el-input
        v-model="editPwd.newPwd"
        clearable
        show-password
        type="password"
        placeholder="请输入新密码"
      />
    </el-form-item>
    <el-form-item label="确认密码" prop="newPwd2">
      <el-input
        v-model="editPwd.newPwd2"
        clearable
        show-password
        type="password"
        placeholder="请输入新密码"
      />
    </el-form-item>
    <el-form-item>
      <div class="flex w-full">
        <div
          v-for="(item, idx) in pwdProgress"
          :key="idx"
          :style="{ marginLeft: idx !== 0 ? '4px' : 0, flex: 1 }"
        >
          <el-progress
            striped
            striped-flow
            :duration="curScore === idx ? 6 : 0"
            :percentage="curScore >= idx ? 100 : 0"
            :color="item.color"
            :stroke-width="10"
            :show-text="false"
          />
          <p
            class="text-center"
            :style="{ color: curScore === idx ? item.color : '' }"
          >
            {{ item.text }}
          </p>
        </div>
      </div>
    </el-form-item>
  </el-form>
</template>
